<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>魅族官网-魅族智能手机官方网站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/html5.js" type="text/javascript" charset="UTF-8"></script>
    <script src="bootstrap/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/base.css" />
</head>

<body>
    <header>
    	<!--标题栏开始-->
        <div id="title" class="col-md-12">
            <div class="col-md-7 col-md-offset-1 titleLeft">
                <ul>
                    <li><a href="">商城</a></li>
                    <li><a href="">魅族</a></li>
                    <li><a href="">魅蓝</a></li>
                    <li><a href="">flyme</a></li>
                    <li><a href="">云服务</a></li>
                    <li><a href="">专卖店</a></li>
                    <li><a href="">服务支持</a></li>
                    <li><a href="">社区</a></li><li>
            </div>
            <div class="col-md-3 titleRight">
                <ul>
                    <li><a href=""><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;购物车(0)</a></li>
                    <li><a href="">注册</a></li>
                    <li><a href="">登录</a></li>
                </ul>
            </div>
        </div>
        <!--标题栏结束-->
        <!--导航开始-->
        <nav class="nav col-md-12 cplr">
            <div class="col-md-2 col-md-offset-1 cplr">
                <div class="header-log"></div>
            </div>
            <div class="col-md-6 header-nav">
                <ul>
                    <li><a href="">魅族手机</a></li>
                    <li><a href="">魅蓝手机</a></li>
                    <li><a href="">数码配件</a></li>
                    <li><a href="">影音娱乐</a></li>
                    <li><a href="">家居生活</a></li>
                </ul>
            </div>
            <div class="col-md-2 header-search cplr">
                <div class="input-group">
                    <input type="text" onfocus="toggleList()" onblur="toggleList()" class="form-control" placeholder="魅蓝Note5">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
                <!-- /input-group -->
                <ul id="datalist">
                    <li>魅族手机<span class="saveList">约有28件</span></li>
                    <li>魅族路由器<span class="saveList">约有28件</span></li>
                    <li>魅蓝手机<span class="saveList">约有28件</span></li>
                    <li>智能手环<span class="saveList">约有28件</span></li>
                    <li>空气净化器<span class="saveList">约有28件</span></li>
                    <li>笔记本<span class="saveList">约有28件</span></li>
                    <li>净水器<span class="saveList">约有28件</span></li>
                </ul>
            </div>
        </nav>
        <!--导航栏结束-->
    </header>
    <container>
        <div class='col-md-10 col-md-offset-1 container c0'>
        	<!--侧边栏开始-->
            <asider class='col-md-3 asider-bar'>
                <ul class="asider-nav">
                    <li class="aside-items">
                    	<a href="">手机<span class="glyphicon glyphicon-chevron-right"></span></a>
                    </li>
                    <li class="aside-items">
                    	<a href="">智能设备<span class="glyphicon glyphicon-chevron-right"></span></a>
                    </li>
                    <li class="aside-items">
                    	<a href="">智能穿戴<span class="glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="aside-items">
                    	<a href="">游戏设备<span class="glyphicon glyphicon-chevron-right"></span></a>
                    </li>
                    <li class="aside-items">
                    	<a href="">数码影音<span class="glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="aside-items">
                    	<a href="">手机配件/移动电源<span class="glyphicon glyphicon-chevron-right"></span></a>
                    </li>
                    <li class="aside-items">
                    	<a href="">移动存储/办公设备<span class="glyphicon glyphicon-chevron-right"></span></a>
                    </li>
                    <li class="aside-items">
                    	<a href="">生活周边<span class="glyphicon glyphicon-chevron-right"></span></a>
                    </li>
                </ul>
            </asider>
            <!--侧边栏结束-->
            <!--循环展示开始-->
            <asider class='next'>
                <span class="glyphicon glyphicon-chevron-right" onclick="changePoster()"></span>
            </asider>
            <!--循环展示结束-->
        </div>
        <!--循环展示的图片-->
        <div class='col-md-10 col-md-offset-1 smallContainer marginTop10'>
            <asider class='col-md-3 posters'>               
              <a href="">
                    <img src="images/poster0.jpg" width="100%" height="100%">
              </a>
            </asider>
            <asider class='col-md-3 posters'>
                <a href="">
                    <img src="images/poster3.jpg" width="100%" height="100%">
                </a>
            </asider>
            <asider class='col-md-3 posters'>
                <a href="">
                    <img src="images/poster1.jpg" width="100%" height="100%">
                </a>
            </asider>
            <asider class='col-md-3 posters'>
                <a href="">
                    <img src="images/poster2.jpg" width="100%" height="100%">
                </a>
            </asider>
        </div>
        <!--循环展示结束-->

        <div class='col-md-10 col-md-offset-1 quickTitle'>热卖商品</div>
        <div class='col-md-10 col-md-offset-1 quickContainer marginTop10' style="height: 360px;">
        	<!--倒计时时钟开始-->
            <div class='col-md-3 quick_posters' style="padding-top: 40px;">
                <div class="time-title">13:14 场</div>
                <img src="images/flashpurchase.png">
                <div class="sub">距离结束还有</div>
                <div class="countdown clearfix">
                    <span class="box hour">05</span>
                    <span class="dosh">:</span>
                    <span class="box min">21</span>
                    <span class="dosh">:</span>
                    <span class="box second">00</span>
                </div>
            </div>
            <!--倒计时时钟结束-->
            <!--热卖1开始-->
            <div class='col-md-3 quick_posters'>
				<div class="bg">
					<div class="content">
						<a href=""><img src="images/quick0.jpg" ></a>
						<div class="title">空气净化器pro 白色</div>
						<div class="desc">大空间快循环</div>
						<p class="price">  
							<span>1399</span>&nbsp;<span>元</span>&nbsp;  <del>1499元</del>   
						</p>
					</div>
				</div>
            </div>
            <!--热卖1结束-->
            <!--热卖2开始-->
            <div class='col-md-3 quick_posters'>
				<div class="bg">
					<div class="content">
						<a href=""><img src="images/quick1.jpg" ></a>
						<div class="title">魅族手环2 黑色</div>
						<div class="desc">OLED 显示屏，触摸操作</div>
						<p class="price">  
							<span>142</span>&nbsp;<span>元</span>&nbsp;  <del>149元</del>   
						</p>
					</div>
				</div>
            </div>
            <!--热卖2结束-->
            <!--热卖3开始-->
            <div class='col-md-3 quick_posters'>
				<div class="bg">
					<div class="content">
						<a href=""><img src="images/quick2.jpg" ></a>
						<div class="title">魅族笔记本Air 13.3英寸</div>
						<div class="desc">指纹解锁，全金属机身</div>
						<p class="price">  
							<span>4988</span>&nbsp;<span>元</span>&nbsp;  <del>5199元</del>   
						</p>
					</div>
				</div>
            </div>
        </div>
        <!--热卖3结束-->
		<div class='col-md-10 col-md-offset-1 quickTitle'>手机</div>
		<div class='col-md-10 col-md-offset-1 quickContainer marginTop10'>
			<div class='col-md-3 quick_posters mobileContent'>
				<a href=""><img src="images/mobile.jpg" width="100%" height="100%"></a>
			</div>
			<!--手机1开始-->
			<div class='col-md-3 quick_posters'>
				<div class="bg">
					<div class="content">
						<a href=""><img src="images/quick4.jpg" ></a>
						<div class="title">魅族note6 4GB+64GB</div>
						<div class="desc">光学变焦双摄，拍人更美</div>
						<p class="price">  
							<span>1399</span>&nbsp;<span>元</span>&nbsp;  <del>1499元</del>   
						</p>
					</div>
				</div>
			</div>
			<!--手机1结束-->
			<!--手机2开始-->
			<div class='col-md-3 quick_posters'>
				<div class="bg">
					<div class="content">
						<a href=""><img src="images/quick5.jpg" ></a>
						<div class="title">魅蓝 全陶瓷尊享版</div>
						<div class="desc">全面屏2.0，Unibody 全陶瓷</div>
						<p class="price">  
							<span>3699</span>&nbsp;<span>元</span>&nbsp;  <del>4699</del>   
						</p>
					</div>
				</div>
			</div>
			<!--手机2结束-->
			<!--手机3开始-->
			<div class='col-md-3 quick_posters'>
				<div class="bg">
					<div class="content">
						<a href=""><img src="images/quick6.jpg" ></a>
						<div class="title">魅族 2GB内存</div>
						<div class="desc">8天超长待机，137g轻巧机身</div>
						<p class="price">  
							<span>599</span>&nbsp;<span>元</span>&nbsp;  <del>699元</del>   
						</p>
					</div>
				</div>
			</div>
			<!--手机3结束-->
			<!--手机4开始-->
			<div class='col-md-3 quick_posters marginTop10'>
				<div class="bg">
					<div class="content">
						<a href=""><img src="images/quick7.jpg" ></a>
						<div class="title">魅族5 Plus 3GB+32GB</div>
						<div class="desc">全面屏手机，4000mAh大电量</div>
						<p class="price">  
							<span>999</span>&nbsp;<span>元</span>&nbsp;  <del>1199元</del>   
						</p>
					</div>
				</div>
			</div>
			<!--手机4结束-->
			<!--手机5开始-->
			<div class='col-md-3 quick_posters marginTop10'>
				<div class="bg">
					<div class="content">
						<a href=""><img src="images/quick8.jpg" ></a>
						<div class="title">魅蓝 3GB+32GB</div>
						<div class="desc">前置1600万超大像素智能美拍</div>
						<p class="price">  
							<span>999</span>&nbsp;<span>元</span>&nbsp;  <del>1199元</del>   
						</p>
					</div>
				</div>
			</div>
			<!--手机5结束-->
			<!--手机6开始-->
			<div class='col-md-3 quick_posters marginTop10'>
				<div class="bg">
					<div class="content">
						<a href=""><img src="images/quick9.jpg" ></a>
						<div class="title">魅蓝Max 2 4GB+64GB</div>
						<div class="desc">6.44''大屏，5300mAh 充电宝级的大电量</div>
						<p class="price">  
							<span>1499</span>&nbsp;<span>元</span>&nbsp;  <del>1699元</del>   
						</p>
					</div>
				</div>
			</div>
			<!--手机6结束-->
		</div>
		<!--页脚开始-->
		<div class="col-md-12 marginTop10 pageFooter">
			<div class="copyright">
				©2018 Meizu Telecom Equipment Co., Ltd. All rights reserved.  粤ICP备13003602号 合字B2-20170010 Powered by zlf		
			</div>
		</div>
		<!--页脚结束-->
	    <!--侧边栏开始-->
		<div class='siderbar col-md-12'>
			<ul class="">
				<li>
					<div class="bar-img"> 
					<img class="original-img" src="https://i8.mifile.cn/b2c-mimall-media/cc0b8948a88a08f6f3b7cd826e09ace6.png"> 
					<img class="hover-img hidden" src="https://i8.mifile.cn/b2c-mimall-media/1012b08b8f0268aab455c56027109a34.png"> 
					</div>
					<div class="bar-text">
						扫一扫
					</div>
				</li>
				<li>
					<div class="bar-img">
					<img class="original-img" src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png"> 
					<img class="hover-img hidden" src="https://i8.mifile.cn/b2c-mimall-media/41f858550f42eb1770b97faf219ae215.png"> 
					</div>
					<div class="bar-text">
						个人中心
					</div>
				</li>
				<li>
					<div class="bar-img"> 
					<img class="original-img" src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png"> 
					<img class="hover-img hidden" src="https://i8.mifile.cn/b2c-mimall-media/5e9f2b1b0da09ac3b3961378284ef2d4.png"> 
					</div>
					<div class="bar-text">
						联系客服
					</div>
				</li>
				<li>
					<div class="bar-img"> 
					<img class="original-img" src="https://i8.mifile.cn/b2c-mimall-media/d7db56d1d850113f016c95e289e36efa.png"> 
					<img class="hover-img hidden" src="https://i8.mifile.cn/b2c-mimall-media/692a6c3b0a93a24f74a29c0f9d68ec71.png"> 
					</div>
					<div class="bar-text">
						购物车
					</div>
				</li>
			</ul>
		</div>
	</container>
	<!--侧边栏结束-->
</body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>
